<template>
  <div>
    <!-- 面包导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/route' }">数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>详情管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="right">
      <el-button type="primary" size="mini" icon="el-icon-upload" @click="change">上传</el-button>
    </div>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-table :data="tableData" :row-class-name="tableRowClassName" 
      style="width: 100%" border
      :header-cell-style="{
          'background-color': '#CBD9EC',
          color: '#fff',
          'font-weight': '400',
        }">
        <el-table-column label="序号" width="75" type="index"></el-table-column>
        <el-table-column prop="subcontract" label="分包编号"> </el-table-column>
        <el-table-column prop="" label="包名称（部位）"></el-table-column>
        <el-table-column prop="subcontracted" label="分标项目名称"> </el-table-column>
        <el-table-column prop="company_name" label="参投单位" width="120"> </el-table-column>
        <el-table-column prop="offer" label="最终报价(万元)" width="120"> </el-table-column>
         <el-table-column prop="approve" label="最终折扣" width="120"> </el-table-column>
        <el-table-column prop="winning" label="中标金额(万元)"> </el-table-column>
        <el-table-column prop="server" label="应收中标服务费(元)" width="120"> </el-table-column>
        <el-table-column prop="ensure" label="实收保证金(元)"> </el-table-column>
        <el-table-column prop="price" label="应收保证金（标书规定缴纳金额）(元)"> </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="detailsClick(scope.$index, scope.row)">详情</el-button>
            <el-button type="primary" size="mini">中标</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    
    <!-- 上传弹框 -->
    <el-dialog title="表格数据上传" :visible.sync="upDialogVisible" width="60%">
      <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip"></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="upDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload()">确 定</el-button>
      </span>
    </el-dialog>
    
    
    <!-- 详情弹框 -->
    <el-dialog title="数据详情" :visible.sync="detailsDialogVisible" width="90%">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="one">
        <el-tab-pane label="开票信息" name="first">
          <el-table :data="invoiceData" stripe style="width: 100%" border>
            <el-table-column prop="company_name" label="参投单位" width="180"> </el-table-column>
            <el-table-column prop="contacts" label="厂商联系人"> </el-table-column>
            <el-table-column prop="phone" label="手机"> </el-table-column>
            <el-table-column prop="award" label="中标通知书代理机构留存情况"> </el-table-column>
            <el-table-column prop="letter" label="中标通知书厂家领取情况"> </el-table-column>
            <el-table-column prop="employer" label="中标通知书业主单位"> </el-table-column>
            <el-table-column prop="acceptance" label="中标通知书需求部门"> </el-table-column>
            <el-table-column prop="address" label="厂家邮寄地址"> </el-table-column>
            <el-table-column prop="remarks" label="备注"> </el-table-column>
            <el-table-column label="操作" width="220">
              <template>
                <el-button type="primary" size="mini">增加</el-button>
                <el-button type="warning" size="mini">修改</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="公司管理" name="second">
          <el-table :data="companyData" border style="width: 100%">
            <el-table-column prop="dates" label="保证金/中标服务费缴纳时间" width="180"> </el-table-column>
            <el-table-column prop="amount" label="应退还保证金额(元)"> </el-table-column>
            <el-table-column prop="fee" label="实收标书费(元)"> </el-table-column>
            <el-table-column prop="Invoicing" label="开票/申请开票情况"> </el-table-column>
            <el-table-column prop="requested" label="申请开票金额"> </el-table-column>
            <el-table-column prop="Invoices" label="申请开票金额"> </el-table-column>
            <el-table-column prop="amountes" label="已开票金额(元)"> </el-table-column>
            <el-table-column prop="uninvoiced" label="未开票金额(元)"> </el-table-column>
            <el-table-column prop="information" label="开票信息"> </el-table-column>
            <el-table-column prop="examine" label="审核"> </el-table-column>
            <el-table-column label="操作" width="220">
              <template>
                <el-button type="primary" size="mini">增加</el-button>
                <el-button type="warning" size="mini">修改</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="支出明细" name="third">
          <div class="right">
            <i class="el-icon-circle-plus-outline" @click="thirdDialogVisible = true"></i>
          </div>
          <el-table :data="tableData2" :row-class-name="tableRowClassName"
          style="width: 100%" border
          show-summary
          :summary-method="getTotal">
            <el-table-column label="序号" width="60" type="index"></el-table-column>
            <el-table-column label="支出类型" prop="type"></el-table-column>
            <el-table-column label="添加时间" prop="itme"></el-table-column>
            <el-table-column label="支出金额" prop="amount"></el-table-column>
          </el-table>
          <!-- <div class="right">
            <p>总支出费用：{{totalAmount}}</p>
          </div> -->
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.counm"
            :page-sizes="[1, 3, 5, 10]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 添加费用支出 -->
    <el-dialog
    title="新增支出费用明细"
    :visible.sync="thirdDialogVisible"
    width="30%">
      <el-form ref="form" :model="thirdForm" label-width="80px">
        <el-form-item label="支出类型">
          <el-select v-model="thirdForm.type" placeholder="请选择支出类型">
            <el-option label="费用一" value="shanghai"></el-option>
            <el-option label="费用二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="thirdForm.amount" class="ipt"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="itme">
           <el-date-picker v-model="thirdForm.itme" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="thirdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="thirdDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 表格数据
      tableData: [
        {
          subcontract: 'JXRY2020-SR-002-JT(WZ)-101',
          package_name: '',
          subcontracted: '铁塔',
          company_name: '江西固德实业有限公司',
          offer: 346.368,
          approve:9.5,
          winning: '/',
          server: '/',
          ensure: 4000,
          price: 4000,
          children: [
            {
              id: 0,
              dates: '2021-8-6',
              amount: 40000.0,
              fee: '/',
              Invoicing: '/',
              requested: '/',
              Invoices: '/',
              amountes: '/',
              uninvoiced: '/',
              information: '/',
              examine: '/',
            },
          ],
          list: [
            {
              company_name: '江西固德实业有限公司',
              contacts: '李俊云',
              phone: 13606066961,
              award: '',
              letter: '',
              employer: '',
              acceptance: '',
              address: '',
              remarks: '',
            },
          ],
        },
        {
          subcontract: 'JXRY2020-SR-002-JT(WZ)-101',
          package_name: '',
          subcontracted: '铁塔',
          company_name: '青岛祥明电力设备有限公司',
          offer: 366.628,
           approve:9.5,
          winning: 366.628,
          server: 34692.064,
          ensure: 4000,
          price: 4000,
          children: [
            {
              dates: '2021-8-6',
              amount: 6406.93699999999,
              fee: '/',
              Invoicing: '/',
              requested: '/',
              Invoices: '/',
              amountes: '/',
              uninvoiced: '/',
              information: '/',
              examine: '/',
            },
          ],
          list: [
            {
              company_name: '青岛祥明电力设备有限公司',
              contacts: '刘朋善',
              phone: 13360862688,
              award: '',
              letter: '',
              employer: '已邮寄或收到',
              acceptance: '已邮寄或收到',
              address: '',
              remarks: '',
            },
          ],
        },
        {
          subcontract: 'JXRY2020-SR-002-JT(WZ)-101',
          package_name: '',
          subcontracted: '铁塔',
          company_name: '中电建成都铁塔有限公司司',
          offer: 342.3863,
          winning: '/',
           approve:9.5,
          server: '/',
          ensure: 4000,
          price: 4000,
          children: [
            {
              dates: '2021-8-6',
              amount: 40000.0,
              fee: '/',
              Invoicing: '/',
              requested: '/',
              Invoices: '/',
              amountes: '/',
              uninvoiced: '/',
              information: '/',
              examine: '/',
            },
          ],
          list: [
            {
              company_name: '中电建成都铁塔有限公司',
              contacts: '代光杰',
              phone: 13808093424,
              award: '',
              letter: '',
              employer: '',
              acceptance: '',
              address: '',
              remarks: '',
            },
          ],
        },
      ],
      // 控制上传弹框的显示隐藏
      upDialogVisible: false,
      // 上传
      fileList: [],
      fileName: '',
      newUploadForm: {
        password: '',
        fileName: '',
      },
      formRules: {
        // 表单 校验
        password: { required: true, trigger: 'blur'},
      },

      // 详情弹框数据区域
      // 控制详情数据的显示与隐藏
      detailsDialogVisible: false,
      companyData: {},
      // 公司管理数据
      invoiceData: {},
      // tab栏默认选中项
      activeName: 'first',

      // 控制添加费用支出弹框的显示与隐藏
      thirdDialogVisible: false,
      // 支出明细数据
      tableData2:[
        {
          type: '专家费用',
          amount: 200,
          time: '2021-6-08'
        },
        {
          type: '专家费用',
          amount: 200,
          time: '2021-6-08'
        },
        {
          type: '专家费用',
          amount: 200,
          time: '2021-6-08'
        },
      ],
      // 增加支出费用明细数据
      thirdForm: {
        type: '',
        amount: '',
        itme: ''
      },
      // 分页
      page: {
        // 每页显示数据条数
        size: 5,
        // 当前页码值
        counm: 1,
      },
      total: 5,
      spanArr: [],
      position: ''
    }
  },
  methods: {
    // 显示合计行
    getTotal(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if(!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if(!isNaN(value)) {
              return prev + curr;
            } else {
              return prev
            }
          }, 0);
          sums[index] += '元';
        }
      });
      return sums;
    },

    // 隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },

    // 点击上传事件
    change() {
      this.upDialogVisible = true
    },
     // 上传
    beforeUpload(file) {
      // 上传前 文件校验
      this.files = file
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!extension && !extension2) {
        this.$message.warning('上传文件只能是 xls、xlsx格式!')
        return
      }
      if (!isLt2M) {
        this.$message.warning('上传文件大小不能超过 2MB!')
        return
      }
      this.fileName = file.name
      return false // 返回false不会自动上传
    },
    submitUpload() {
      // 确认上传
      this.$refs['newUploadForm'].validate((valid) => {
        // 是否通过 表单验证
        if (valid) {
          if (this.fileName == '') {
            this.$message({
              message: '请选择要上传的文件！',
              type: 'warning',
              showClose: true,
            })
            return false
          }
        
          let fileFormData = new FormData()
          fileFormData.append('file', this.files, this.fileName) // 上传的文件
          fileFormData.append('period', this.newUploadForm.password) // 文件密码
          fileFormData.append('fileName', this.newUploadForm.fileName) // 文件名
           this.addDialogVisible = false
          uploadEmployee(fileFormData)
            .then((res) => {
              // 上传请求
              this.fileName = ''
              // console.log(res)
              if (res.code == 200) {
              } else {
              }
            })
            .catch((err) => {
              this.fileName = ''
              console.log('err')
            })
        } else {
          this.$message({
            type: 'warning',
            message: '请输入密码',
            showClose: true,
          })
        }
      })
    },
    handleClose() {
      this.fileName = ''
    },
    

    // 详情事件区域
    // 点击详情事件触发
    detailsClick(index, row) {
      // console.log(row)
      this.companyData = row.children
      this.companyData.index = index
      // console.log(this.companyData)

      this.invoiceData = row.list
      this.invoiceData.index = index
      // console.log(this.invoiceData)
      this.detailsDialogVisible = true
    },
    // tab栏选中项改变时触发
    handleClick(tab, event) {
      // console.log(tab, event)
    },

    // 每页显示数据条数发生变化时触发
    handleSizeChange(newSize) {
      // console.log(newSize);
    },
    // 页码值发生变化时触发
    handleCurrentChange(newPage) {
      // console.log(newPage);
    },

    // 支出事件区域
    addThirdClick() {
      
    }
  },
  computed: {
    totalAmount(amount) {
      let totalAmount = 0;
      for(let item of this.tableData2) {
        totalAmount += item.amount;
      }
      return totalAmount
    }
  }
}
</script>

<style scoped>
.right {
  text-align: right;
}
.right i{
  font-size: 30px;
}

.right p {
  font-size: 18px;
  font-weight: 800;
}
.boxo{
  margin:0 auto;
}
.ipt{
  width:220px;
}
</style>